{block name=body}
<div id="maincont">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="checkout2">
                    <div class="hidden-xs" id="steps">
                        <a href="/shopping-cart">订单信息</a> | <span class="bold">个人信息</span> {if $classQtyOnCart gt 0}| 学生信息 {/if}| 付款
                    </div>
                    <div class="visible-xs mobile-steps">
                        <span class="bold">步骤 {if $classQtyOnCart gt 0}2 / 4{else}2 / 3{/if}</span>
                    </div>
                </div>
                <div class="checkout-students" style="display:none;">
                    <div class="hidden-xs" id="steps">
                        <a href="/shopping-cart">订单信息</a> | <a href="javascript:void(0);" onclick="goCheckout2('#shipping');">个人信息</a> | <span class="bold">学生信息</span> | 付款
                    </div>
                    <div class="visible-xs mobile-steps">
                        <span class="bold">步骤 {if $classQtyOnCart gt 0}3 / 4{else}2 / 3{/if}</span>
                    </div>
                </div>
                <div class="checkout3" style="display:none;">
                    <div class="hidden-xs" id="steps">
                        <a href="/shopping-cart">订单信息</a> | <a href="javascript:void(0);" onclick="goCheckout2('#shipping');">个人信息</a> {if $classQtyOnCart gt 0}| <a href="javascript:void(0)" onclick="goCheckoutStudent()">学生信息</a>{/if} | <span class="bold">付款</span>
                    </div>
                    <div class="visible-xs mobile-steps">
                        <span class="bold">步骤 {if $classQtyOnCart gt 0}4 / 4{else}3 / 3{/if}</span>
                    </div>
                </div>
                <div class="row headings checkout3" style="display:none;" id="chkoutcolhead">
                    <div class="hidden-xs col-sm-7">商品</div>
                    <div class="col-xs-4 col-sm-1 text-right">数量</div>
                    <div class="col-xs-4 col-sm-2 text-right">单价</div>
                    <div class="col-xs-4 col-sm-2 text-right">小计</div>
                </div>
                <div class="row tallbox checkout3" style="display:none;">
                    <div class="col-sm-12">
                        {assign var='hasClass' value=0} {foreach from=$productsOnCart item=item}
                        <div class="row cartitem">
                            <div class="col-xs-12 col-sm-7 bluetext">
                                <a href="{$item.url}">{$item.cartitem_product_name}
{if $item.cartitem_class_flag eq 1}
{assign var='hasClass' value=1}
{/if}
{if $item.attributes } 
    {assign var='hasweek' value=0}
    {if $item.cartitem_class_flag eq 1 && $item.cartitem_enrolment_type eq 'T' }
                                / 日期: {getdatebyweekdaystartdate weekday=$item.class_weekday startdate=$item.term_start_date weeksafter=$item.attributes.0.cartitem_attr_attr_value_name-1 dateformat='d/m/Y'}
    {else}
        {foreach from=$item.attributes item=attr name=attributesarr}
            {if $attr.cartitem_attr_attribute_name eq 'week'}
                {assign var='hasweek' value=$hasweek+1}
            {else}
                                / {$attr.cartitem_attr_attribute_name}: {$attr.cartitem_attr_attr_value_name}
            {/if} 
        {/foreach}
        {if $hasweek gt 0}
                                / 课程 {$hasweek} 周
        {/if}
    {/if}
{/if}
                                </a>
                                <a class="right" href="/shopping-cart" title="Edit"><span class="glyphicon glyphicon-pencil"></span></a>
                            </div>
                            <div class="col-xs-4 col-sm-1 text-right">
                                <div id="qty-{$item.cartitem_id}">{$item.cartitem_quantity}</div>
                                <div id="qty-discount-{$item.cartitem_id}">{if $item.productqty_modifier.productqty_modifier neq 0}(-{$item.productqty_modifier.productqty_modifier|number_format:0:".":','}%){/if}</div>
                            </div>
                            <div class="col-xs-4 col-sm-2 text-right" id="priceunit-{$item.cartitem_id}">
                                <div id="price-{$item.cartitem_id}">{$CURRENCY_SYMBOL}{$item.cartitem_product_price|number_format:2:".":","}</div>
                            </div>
                            <div class="col-xs-4 col-sm-2 text-right" id="subtotal-{$item.cartitem_id}">{$CURRENCY_SYMBOL}{$item.cartitem_subtotal|number_format:2:".":","}</div>
                        </div>
                        {/foreach}
                    </div>
                    <div id="prdet">
                        <div class="col-sm-7 col-sm-offset-5">
                            <div class="row">
                                <div class="col-xs-4 col-sm-8 text-right {if $classQtyOnCart eq 0}hide{/if}">小计</div>
                                <!-- The following SUBTOTAL value was intentionally changed to TOTAL  -->
                                <div class="col-xs-8 col-sm-4 num text-right {if $classQtyOnCart eq 0}hide{/if}" id="subtotal">{$CURRENCY_SYMBOL}{$totals.subtotal|number_format:2:".":","}</div>
                            </div>
                            {if $totals.discount gt 0}
                            <div class="row">
                                <div class="col-xs-4 col-sm-8 text-right {if $classQtyOnCart eq 0}hide{/if}">学费折扣</div>
                                <div class="col-xs-8 col-sm-4 num text-right {if $classQtyOnCart eq 0}hide{/if}" id="discount">-{$CURRENCY_SYMBOL}{$totals.discount|number_format:2:".":","}</div>
                            </div>{/if}
                            <!-- <div class="row"><div class="col-xs-4 col-sm-8 text-right">Shipping</div>
                <div class="col-xs-8 col-sm-4 num text-right" data-value="{$selectedShippingFee}" id="shipping-fee">{if $selectedShippingFee}${$selectedShippingFee|number_format:2:".":","}{else}$0.00{/if} </div></div> -->
                            <div class="row tots">
                                <div class="col-xs-4 col-sm-2 col-sm-offset-6 bold text-right">
                                    总价
                                </div>
                                <div class="col-xs-8 col-sm-4 bold num text-right">{assign var='newTotal' value=$selectedShippingFee + $totals.total}
                                    <div class="bold tots" id="total" data-value="{$totals.total}">{$CURRENCY_SYMBOL}{$newTotal|number_format:2:".":","}</div>
                                    <!-- <div class="small">{$CURRENCY_CODE} </div> -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br />
                <div class="row topborder checkout3" style="display:none;">
                    <div class="col-sm-8" id="ship3">
                        <span class="bold tots">收货人信息</span>
                        <a href="javascript:void(0);" onclick="goCheckout2('#shipping');" title="Edit"><span class="chkedit1 glyphicon glyphicon-pencil"></span></a>
                        <br />
                        <div id="shipping-summary">
                            {if $address.S}
                            {$address.S.address_name} {$address.S.address_surname} {$address.S.address_state} {$address.S.address_suburb} {$address.S.address_country} {$address.S.address_line1} {$address.S.address_postcode} {$address.S.address_telephone}
                            <br /> {if $comments}运费说明: {$comments}{else}不需要支付运费{/if}
                            <br />
                            {/if}
                        </div>
                    </div>
                    <div class="col-sm-5 {if $classQtyOnCart eq 0}hide{/if}" id="student-summary-wrapper">
                        <span class="bold tots">选择学生</span>
                        <a href="javascript:void(0);" onclick="goCheckoutStudent()" title="Edit"><span class="chkedit1 glyphicon glyphicon-pencil"></span></a>
                        <br />
                        <div id="student-summary">
                            {foreach $students as $student} {assign var='selectedStudent' value=0} {foreach $student.cartitem_id as $stClss} {if $stClss eq 1}{assign var='selectedStudent' value=1}{/if} {/foreach} {if $selectedStudent eq 1}{$student.student_name} {$student.student_surname}
                            <br />{/if} {/foreach}
                        </div>
                    </div>
                </div>
                <br />
                <div class="checkout2" style="display:none;">
                    {include file='checkout-login.tpl'}
                </div>
                {if $hasClass}
                <div class="checkout-students" style="display:none;">
                    <div class="row" id="student-form-wrapper">
                        <div class="col-sm-12">
                            <h2 class="title">学生信息</h2>
                            <form class="form-horizontal" id="student-form" role="form" accept-charset="UTF-8" action="" method="post">
                                <input type="hidden" value="setStudent" name="action" />
                                <div id="student-wrapper">
                                    {assign var='cnt' value=0} {if $students} {foreach $students as $student} {include file='student.tpl' cnt=$cnt++ newmember=1} {/foreach} {/if}
                                </div>
                                <div class="col-sm-12 text-center error-alert" style="display:none;">
                                    <div class="alert alert-danger fade in ">
                                        <button class="close" aria-hidden="true" type="button" onclick="$(this).closest('.error-alert').fadeOut('slow');">&times;</button>
                                        <strong></strong>
                                    </div>
                                </div>
                                <input type="hidden" name="cnt" id="cnt" value="{$cnt}" />
                                <div class="stuformbuttons">
                                    <div class="col-sm-offset-3 col-sm-3 text-center">
                                        <button type="button" type="button" class="enquire" onclick="AddStudent('student-form')">添加新学生</button>
                                    </div>
                                    <div class="col-sm-3 text-center">
                                        <button id="step3-btn" type="button" onclick="$('#student-form').submit()" class="enquire" {if !$students}style="display:none;" {/if}>下一步</button>
                                    </div>
                                    <div class="row">
                                        <div class="col-sm-12 small">
                                            <!-- <br>A 10% sibling discount is available on each enrolment (after the first one) and will be calculated in the next step. -->
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                {/if}
                <div class="checkout3" style="display:none;">
                    <form class="form-horizontal" id="paypal-form" action="/process/paypal" method="post">
                        <input type="hidden" value="REDIRECT" name="action" />
                    </form>
                    <form class="form-horizontal" id="checkout3-form" role="form" accept-charset="UTF-8" action="/process/cart" method="post">
                        <div class="row">
                            <input type="hidden" value="placeOrder" name="action" />
                            {if $error}
                            <div class="col-sm-12 error-textbox" id="payment-error">{$error}</div>
                            {/if}
                            {if $newTotal gt 0.01 }
                            <div class="col-sm-12">
                                <h2 class="title">支付方式</h2>
                            </div>
                            <div class="col-sm-12 dark">
                                <!-- <p>所有的交易都是安全和加密的，我们从不存储您的信用卡信息。要了解更多，请查看我们的 <a href="/privacy-policy" target="_blank">隐私政策</a>。 </p> -->
                                <p>请选择您的付款方式：</p>
                            </div>
                            <div class="col-sm-12" id="paymentopt">
                                <div class="chkmethod">
                                    <input type="radio" value="wx" id="paymentwechatpay" name="payment-method" checked="checked">
                                    <label class="payopt" for="paymentwechatpay" style="line-height:30px;"><img src="/images/wxlogo.png" style="height:30px;vertical-align:top;" alt="微信" /> 微信</label>
                                </div>
                                <div class="chkmethod">
                                    <input type="radio" value="al" id="paymentalipay" name="payment-method">
                                    <label class="payopt" for="paymentalipay" style="line-height:30px;"><img src="/images/alipaylogo.png" style="height:30px;vertical-align:top;" alt="支付宝" /> 支付宝</label>
                                </div>
                                <div class="chkmethod">
                                    <input type="radio" value="un" id="paymentunionpay" name="payment-method">
                                    <label class="payopt" for="paymentunionpay" style="line-height:30px;"><img src="/images/unionpay.png" style="height:30px;vertical-align:top;" alt="银联" /> 银联在线支付</label>
                                </div>
                                <!-- <div class="chkmethod">
                                    <input type="radio" value="bt" id="paymentbanktranf" name="payment-method">
                                    <label class="payopt" for="paymentbanktranf">银行转账<img src="/images/bank_transfer.png" alt="银行转账" /></label>
                                </div> -->
                                <!-- <div class="chkmethod">
                                    <input type="radio" value="cc" id="paymentcard" name="payment-method" checked="checked" onclick="$('.creditcard-item').show(); $('.bankTransfer-item').hide();setCCRequired(true);">
                                    <label class="payopt" for="paymentcard"><img src="/images/mcvisa.png" alt="mastercard-visa-icon" /></label>
                                </div> -->
                            </div>
                            {else}
                            <div class="col-sm-12" id="no-payment-req">
                                不需要付款
                            </div>
                            {/if}
                        </div>
                        <div class="error-textbox" id="error-text2"></div>
                        <div class="row">
                            <div class="col-sm-4 col-sm-offset-8 text-right">
                                <div id="cc-total-wrapper" class="small text-center">应付总额：<b id="cc-total">{$CURRENCY_SYMBOL}{$newTotal}</b></div>
                                <button id="payment-btn" type="submit" class="enquire"><span>提交{if $hasClass}报名{/if}订单</span></button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade csv" tabindex="-1" role="dialog" aria-labelledby="myModalcsv" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                什么是 CSV?
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove"></span>
                    <div class="small">关闭</div>
                </button>
            </div>
            <div class="modal-body text-center">
                <img src="/images/csv.jpg" alt="csv" />
                <p>您的CSV是3位验证码，您可在信用卡背面发现。</p>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
{include file='helpblock.tpl'}
{/block}
{* Place additional javascript here so that it runs after General JS includes *}
{block name=tail}
<style type="text/css">
@media (max-width: 767px) {
    #popular .greybg {
        display: none;
    }
}
</style>
<script type="text/javascript">
$(function() {
    $('select').selectBoxIt();
});
$("select#statesh").change(function() {
    $("select#suburbsh").data("selectBox-selectBoxIt").remove();
    var id = $('select#statesh option:selected').val();
    $.ajax({
        url: "/process/regionsuburbs",
        dataType: "json",
        data: {
            query: id
        },
        success: function(data) {
            $("select#suburbsh").data("selectBox-selectBoxIt").add(data);
        }
    });
});

$(document).ready(function() {
    var oProvince = $("select#state");
    var oCity = $("select#suburb");
    var oCountry = $("select#country");

    var city = function(){
        var n = oProvince.get(0).selectedIndex;
        var id = oProvince.find("option:selected").val();
        $.ajax({
            url: "/process/regionsuburbs",
            dataType: "json",
            data: {
                name: id,
                type:"suburb"
            },
            success: function( data ) {
                oCity.data("selectBox-selectBoxIt").remove();
                oCity.data("selectBox-selectBoxIt").add(data);
{if $address && $address.S.address_suburb}
                oCity.data("selectBox-selectBoxIt").selectOption("{$address.S.address_suburb}");
{/if}
                //district();
            }
        });
    }

    var district = function(){
        var n = oCity.get(0).selectedIndex;
        var id = oCity.find("option:selected").val();
        $.ajax({
            url: "/process/regionsuburbs",
            dataType: "json",
            data: {
                name: id,
                type:"country"
            },
            success: function( data ) {
                oCountry.data("selectBox-selectBoxIt").remove();
                oCountry.data("selectBox-selectBoxIt").add(data);
{if $address && $address.S.address_country}
                oCountry.data("selectBox-selectBoxIt").selectOption("{$address.S.address_country}");
{/if}
            }
        });
    }

    city();
    oProvince.change(function(){
        city();
    });

    oCity.change(function(){
        district();
    });

    $('#checkout2-form').validate();

    $('#postcodesh').rules("add", {
        digits: true,
        minlength: 3
    });

    {if $error || ($checkoutstep eq 3)}
    goCheckout3();
    {else}
    goCheckout2();
    {/if}
});

// function setCCRequired(CONDITION) {
//     if (CONDITION) {
//         $('.cc-req').attr('required', 'required');
//         $('.cc-select-req').addClass('required');
//         $('#cc-total-wrapper').show();
//     } else {
//         $('.cc-req').removeAttr('required');
//         $('.cc-select-req').removeClass('required');
//         $('#cc-total-wrapper').hide();
//     }

// }

function goCheckout2(OBJ) {
    /* location.reload();  */
    $('.checkout3').hide();
    $('.checkout2').show();
}

function goCheckoutStudent() {
    $('.checkout2').hide();
    $('.checkout3').hide();
    $('#student-form').validate();
    $('.checkout-students').show();
    scrolltodiv('#maincont');
    /* CheckSelectedClasses(); */
    ValidateClassesByAge();
}

function goCheckout3() {
    $('.checkout2').hide();
    $('.checkout-students').hide();
    $('.checkout3').show();
    $('#checkout3-form').validate();
    //setCCRequired(true);
    scrolltodiv('#maincont');

    {if $newTotal gt 0.01}

    $('#ccno').rules("add", {
        creditcard: true,
        messages: {
            equalTo: "数字不正确"
        }
    });

    $('#cccsv').rules("add", {
        digits: true,
        minlength: 3
    });

    {/if}

}

/* function maxLength(el) {    
    if (!('maxLength' in el)) {
        var max = el.attributes.maxLength.value;
        el.onkeypress = function () {
            if (this.value.length >= max) return false;
        };
    }
}

maxLength(document.getElementById("text")); */
</script>
{/block}
